<template>
<view>
<!-- pages/topicality/xiaofeiquan/xiaofeiquan.wxml -->
<view>
  <!-- 切换城市 -->
  <image src="http://imgbdb3.bendibao.com/img/hs_banner.jpg?v=0613" class="main-img">
    <!-- <view class="city-box"> -->
      <!-- <text>{{city}}</text> -->
      <!-- <image src="/images/dwicon.png"></image> -->
    <!-- </view> -->
    <view class="change-city flex col">
      <view class="city flex center">
        <text style="margin-left: 70rpx;">出发城市:</text>
        <picker @change="bindProv" :value="leavePindex" :range="leaveProvPick" range-key="province">
          <view class="sel-city">
            <view class="picker">
              <text>{{leaveProvPick[leavePindex].province}}</text>
            </view>
            <image src="/static/images/dwicon.png"></image>
          </view>
        </picker>
        <picker @change="bindCity" :value="leaveCindex" :range="leaveProvPick[leavePindex].citylist" range-key="cityname">
          <view class="sel-city">
            <view class="picker">
              <text>{{leaveProvPick[leavePindex].citylist[leaveCindex].cityname}}</text>
            </view>
            <image src="/static/images/dwicon.png"></image>
          </view>
        </picker>
      </view>
      <view class="city flex center">
        <text style="margin-left: 70rpx;">到达城市:</text>
        <picker @change="bindToProv" :value="pindex" :range="provPick" range-key="province">
          <view class="sel-city">
            <view class="picker">
              <text>{{provPick[pindex].province}}</text>
            </view>
            <image src="/static/images/dwicon.png"></image>
          </view>
        </picker>
        <picker @change="bindToCity" :value="cindex" :range="provPick[pindex].citylist" range-key="cityname">
          <view class="sel-city">
            <view class="picker">
              <text>{{provPick[pindex].citylist[cindex].cityname}}</text>
            </view>
            <image src="/static/images/dwicon.png"></image>
          </view>
        </picker>
      </view>
      <view class="tips">更多地区在持续添加中</view>
    </view>
  </image>
  <view class="content" :style="'margin-top: ' + marginTop + 'px'">
    <view class="table-title flex around">
      <view class="title-text">出行路径</view>
      <view class="title-text">核酸政策</view>
      <view class="title-text">详情</view>
    </view>
    <view class="table">
      <view class="tr">
        <view v-for="(item, index) in geliInfo" :key="index" :class="'td flex around ' + (item.over ? 'select' : '')" @tap="detail" :data-index="index">
          <view class="path flex center">
            <image src="/static/images/geli_down.png" :class="'arrow-down ' + (item.over ? 'up' : '')"></image>
            <view>{{item.leavecity}}-{{item.cityname}}</view>
          </view>
          <view :class="'mes ' + (item.over ? 'over' : '')">{{item.gov}}</view>
          <view class="detail" @tap.stop="openDetail" :data-index="index">详情</view>
        </view>
        <view class="more flex center" v-if="showMore" @tap="showMoreInfo">
          <text>查看更多地区</text>
          <image src="/static/images/geli_more.png" class="more-down"></image>
        </view>
        <view class="tips">免责声明：本页面的信息仅供参考，数据来源官方，若前往某地街道社区或者村镇建议直接咨询当地政府部门</view>
      </view>
    </view>
  </view>
  <view class="daofen" v-if="daofen">
    <rich-text :nodes="daofen.content" style="user-select:text;-webkit-user-select:text"></rich-text>
  </view>
</view>
<!-- 快捷导航 -->
<fastnav :qrcodeimg="qrcodeimg" :citycode="citycode" :showNav="showNav" :showShare="showShare"></fastnav>

<view class="fixed" style="z-index:99999;">
  <button open-type="share" class="share">
    <view>
      <view>分享</view>
      <image class="share-icon" src="http://imgbdb3.bendibao.com/whbdb/20202/28/20200228094105_67638.png"></image>
    </view>
  </button>
  <navigator class="other-city" @tap="subscribe" :url="'../hesuanjiance?city=' + citycode">查看{{city}}核酸政策专题</navigator>
</view>
</view>
</template>

<script>
import util from "../../../../utils/util";
const app = getApp();
var QQMapWX = require("../../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
var allInfo = [];
var leaveCityData = {};
import fastnav from "../../../../component/fastnav/fastnav";
import subscribeMessage from "../../../../component/subscribeMessage/subscribeMessage";

export default {
  data() {
    return {
      citycode: "sz",
      city: '深圳',
      province: '广东',
      pindex: 0,
      cindex: 0,
      cityPick: ["选择城市"],
      showNav: true,
      // 快捷导航是否展开
      showMore: false,
      showShare: true,
      // 显示分享按钮
      leaveProvPick: [],
      leaveCityPick: [],
      leavePindex: 0,
      leaveCindex: 0,
      showMore: true,
      provPick: "",
      geliInfo: [],
      daofen: false,
      qrcodeimg: "",
      marginTop: "",
      infoData: ""
    };
  },

  components: {
    fastnav,
    subscribeMessage
  },
  props: {},
  onLoad: function (options) {
    util.getUrl(app.globalData.url).then(res => {
      this.getProvinceData(options.city);
      const query = uni.createSelectorQuery();
      setTimeout(() => {
        query.select('.change-city').boundingClientRect();
        query.selectViewport().scrollOffset();
        query.exec(res => {
          if (res && Array.isArray(res)) this.setData({
            marginTop: res[0].height
          });
        });
      }, 200);
    });
  },
  onShareAppMessage: function () {
    return {
      title: this.info.title ? this.info.title : "隔离政策查询"
    };
  },
  methods: {
    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city;
          let province = res.result.address_component.province;
          let provinceIndex, cityIndex, toProvinceIndex; // let city="芜湖市";

          let citydata;

          if (province && city) {
            let findProvince = this.leaveProvPick.filter(pro => province.includes(pro.province))[0];
            provinceIndex = this.leaveProvPick.findIndex(pro => province.includes(pro.province));
            toProvinceIndex = this.provPick.findIndex(pro => province.includes(pro.province));

            if (findProvince) {
              citydata = findProvince.citylist.filter(findCity => city.includes(findCity.cityname))[0];
              cityIndex = findProvince.citylist.findIndex(findCity => city.includes(findCity.cityname));
            }
          }

          if (citydata != '' && city.indexOf(this.city) == -1) {
            uni.showModal({
              content: '您当前定位城市为' + city + '\n是否需要切换到' + city + '隔离政策查询？',
              success: res => {
                if (res.confirm) {
                  this.setData({
                    city: citydata.cityname,
                    citycode: citydata.citycode,
                    province,
                    leavePindex: provinceIndex,
                    leaveCindex: cityIndex,
                    pindex: toProvinceIndex,
                    cindex: 0
                  }); // let clist = [];
                  // this.data.provPick.forEach((v, k) => {
                  //     if (v == this.data.province) {
                  //         this.setData({
                  //             pindex: k,
                  //         })
                  //     }
                  // })
                  // this.data.cityArray[this.data.pindex].citylist.forEach(v => {
                  //     clist.push(v.cityname)
                  // })
                  // this.setData({
                  //     cityPick: this.data.cityPick.concat(clist)
                  // })
                  // this.data.cityPick.forEach((v, k) => {
                  //     if (v == this.data.city) {
                  //         this.setData({
                  //             cindex: k,
                  //         })
                  //     }
                  // })

                  this.getQrcode();
                  this.getInfoData();
                }
              }
            });
          }
        }
      });
    },

    getInfoData() {
      util.request('zhuanti.php', {
        action: "hesuan_all",
        type: "city",
        citycode: this.citycode
      }).then(res => {
        if (res.data && res.data.data.data) {
          res.data.data.data.forEach(item => item.over = false);
          this.info = res.data.data;

          if (res.data.data.hasOwnProperty("daofen") && res.data.data.daofen) {
            res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"'); // .replace(/<span>/ig, '<p class="p_class">')
          }

          this.setData({
            infoData: res.data.data.data,
            daofen: res.data.data.daofen
          });
          this.title = res.data.data.title;
          let data;
          if (leaveCityData.citycode) data = this.infoData.filter(item => item.leavecity == this.city && item.cityname == leaveCityData.cityname);else data = this.infoData.filter(item => item.leavecity == this.city).slice(0, 5);

          if (this.infoData.length > 5 && data.length >= 5) {
            this.setData({
              showMore: true
            });
          }

          allInfo = this.infoData.filter(item => item.leavecity == this.city);
          this.setData({
            geliInfo: data
          });
        } else {
          uni.showToast({
            title: '请求数据失败，请稍后重试',
            icon: 'none'
          });
        }
      });
    },

    showMoreInfo() {
      this.setData({
        geliInfo: allInfo,
        showMore: false
      });
    },

    getProvinceData(optcode) {
      util.getUrl(app.globalData.url).then(() => {
        let data = {
          action: "hesuan_all",
          type: "city",
          citycode: optcode ? optcode : this.citycode
        };
        util.request('zhuanti.php', data).then(res => {
          if (res.data && res.data.data.data) {
            if (res.data.data.cityname) res.data.data.cityname.city.forEach(citys => {
              citys.citylist.unshift({
                cityname: "选择城市"
              });
            });
            if (res.data.data.leave) res.data.data.leave.city.forEach(citys => {
              citys.citylist.unshift({
                cityname: "选择城市"
              });
            });
            this.setData({
              leaveProvPick: res.data.data.leave.city,
              provPick: res.data.data.cityname.city,
              infoData: res.data.data.data
            });
            this.info = res.data.data;
            let leavePindex = this.leaveProvPick.findIndex(item => item.province == this.province) ? this.leaveProvPick.findIndex(item => item.province == this.province) : 0;
            let leaveCindex = this.leaveProvPick[leavePindex].citylist.findIndex(item => item.cityname == this.city);
            let toPindex = this.provPick.findIndex(item => item.province == this.province) ? this.provPick.findIndex(item => item.province == this.province) : 0;
            this.setData({
              leavePindex,
              leaveCindex,
              pindex: toPindex,
              cindex: 0
            });
            if (res.data.data.leave.city && optcode) res.data.data.leave.city.forEach(provinces => provinces.citylist.forEach(city => {
              if (city.citycode == optcode) this.setData({
                leavePindex: this.leaveProvPick.findIndex(item => item.province == provinces.province),
                leaveCindex: this.leaveProvPick[this.leaveProvPick.findIndex(item => item.province == provinces.province)].citylist.findIndex(item => item.citycode == optcode),
                city: city.cityname,
                citycode: city.citycode
              });
            }));
            let data = this.infoData.filter(item => item.leavecity == this.city).slice(0, 5);
            data.forEach(item => item.over = false);

            if (this.infoData.length > 5) {
              allInfo = this.infoData.filter(item => item.leavecity == this.city);
              this.setData({
                showMore: true
              });
            }

            if (res.data.data.hasOwnProperty("daofen") && res.data.data.daofen) {
              res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"'); // .replace(/<span>/ig, '<p class="p_class">')
            }

            this.setData({
              geliInfo: data,
              daofen: res.data.data.daofen
            });
            if (!optcode) this.getLocation();
            this.getQrcode();
          } else if (res.data) {
            uni.showToast({
              title: '当前城市暂无隔离信息',
              icon: 'none',
              success: res => this.getProvinceData('sz')
            });
          }
        });
      });
    },

    bindProv(e) {
      this.setData({
        leavePindex: e.detail.value,
        leaveCindex: 0
      });
    },

    bindToProv(e) {
      this.setData({
        pindex: e.detail.value,
        cindex: 0
      });
    },

    bindCity(e) {
      let cityData = this.leaveProvPick[this.leavePindex].citylist[e.detail.value];
      this.setData({
        leaveCindex: e.detail.value,
        citycode: cityData.citycode,
        city: cityData.cityname
      });
      this.getInfoData();
    },

    bindToCity(e) {
      leaveCityData = this.provPick[this.pindex].citylist[e.detail.value];

      if (leaveCityData.cityname == this.city && leaveCityData.citycode == this.citycode) {
        uni.showToast({
          title: '出发城市与到达城市不能相同',
          icon: 'none'
        });
        return;
      }

      if (leaveCityData.cityname) this.setData({
        cindex: e.detail.value
      });

      if (leaveCityData.cityname == "选择城市") {
        this.setData({
          geliInfo: allInfo.filter(item => item.leavecity == this.city).slice(0, 5),
          showMore: true
        });
        return;
      }

      let geliInfo = allInfo.filter(item => item.cityname == leaveCityData.cityname && item.leavecity == this.city);
      this.setData({
        geliInfo,
        showMore: false
      });
    },

    // 获取城市公众号二维码
    getQrcode() {
      util.cityConfig(this.citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode
        });
      });
    },

    detail(e) {
      let index = e.currentTarget.dataset.index;
      this.geliInfo[index].over = !this.geliInfo[index].over;
      this.setData({
        geliInfo: this.geliInfo
      });
    },

    openDetail(e) {
      let data = this.geliInfo[e.currentTarget.dataset.index];
      if (data.arr) uni.navigateTo({
        url: `/pages/article/detail/detail?id=${data.arr.id}&type=${data.arr.type}&city=${data.arr.citycode ? data.arr.citycode : this.citycode}`
      });
    },

    onPageScroll: function (e) {
      this.setData({
        showNav: false
      });
    },

    subscribe() {
      console.log("占位：函数 subscribe 未声明");
    }

  }
};
</script>
<style>
/* pages/topicality/xiaofeiquan/xiaofeiquan.wxss */

.main-img {
    width: 100%;
    height: 276rpx;
}

.city-box {
    background: #ffffff;
    border-radius: 35rpx;
    padding: 10rpx 30rpx;
    position: absolute;
    top: 40rpx;
    right: 30rpx;
    display: flex;
    align-items: center;
}

.city-box text {
    font-size: 30rpx;
    font-weight: bolder;
}

.city-box image {
    width: 23rpx;
    height: 15rpx;
    margin-left: 10rpx;
}

.change-city {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 6rpx rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 20rpx;
    padding: 30rpx 0rpx;
    position: absolute;
    top: 235rpx;
    width: 90%;
    margin-left: 36rpx;
    display: flex;
    align-items: flex-start;
}

.change-city text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 36rpx;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
    width: 102rpx;
    text-align: center;
    white-space: nowrap;
}

.sel-city {
    display: flex;
    align-items: center;
    margin-left: 80rpx;
}

.sel-city image {
    width: 19rpx;
    height: 10rpx;
    margin-left: 15rpx
}

.content {
    /* margin: 200rpx 20rpx; */
    margin-top: 200rpx;
    margin-bottom: 30rpx;
    font-size: 26rpx;
}

.content .arrow-down {
    width: 24rpx;
    height: 24rpx;
    margin-right: 10rpx;
}

.content .table .tr {
    margin: 20rpx;
}

.content .table .tr .td .mes {
    width: 50%;
}

.content .table .tr .td .path {
    overflow: hidden;
}

.content .table .tr .td {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 73rpx;
    margin: 29rpx 0;
    padding: 29rpx;
    border-radius: 8rpx;
    background: #fafafa;
}

.content .select {
    background: #fff;
    border: .5px solid #eee;
    box-shadow: 0 10rpx 38rpx 0 rgba(0, 0, 0, .05);
}

.content .over {
    display: flex !important;
}

.content .up {
    transform: rotate(180deg)
}

.content .mes {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 0 .05rem;
}

.content .detail {
    color: #5195DD;
}


/* 查看更多 */

.see-more {
    display: flex;
    justify-content: center;
    margin-top: 20rpx;
}

.see-more view {
    background-color: #EEEEEE;
    padding: 20rpx 40rpx;
    font-size: 26rpx;
    border-radius: 12rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #141414;
    text-align: center;
    width: 200rpx;
}


/* 导粉 */

.daofen {
    margin: 80rpx 0;
    text-align: center;
}

.p_class {
    margin: 10rpx 30rpx;
    line-height: 50rpx;
}

.more {
    height: 85rpx;
    margin: 0 29rpx;
    line-height: 85rpx;
    font-size: 29rpx;
    color: #2696ff;
    letter-spacing: 2rpx;
    text-align: center;
    font-weight: 700;
    background-color: #f6f6f6;
    border-radius: 19rpx;
}

.more-down {
    width: 46rpx;
    height: 46rpx;
}

.tips {
    width: 100%;
    padding-bottom: 20rpx;
    padding-top: 30rpx;
    font-size: 24rpx;
    color: #999;
    text-align: center;
}

.fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: auto;
    background: #fff;
    padding: 10rpx 0;
    z-index: 999;
}

.share {
    width: 35%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 56rpx;
    color: #ffffff;
    font-weight: 500;
    background-color: #5395DE;
    margin-left: 20rpx;
}

.share view {
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-icon {
    width: 30rpx;
    height: 30rpx;
    margin-left: 10rpx;
}

.other-city {
    width: 65%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border: 0;
    border-radius: 56rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin-top: 10rpx;
    color: #ffffff;
    background: #5395DE;
}

.city:first-child {
    margin-bottom: 30rpx;
}

.tips {
    margin-top: 20rpx;
    padding: 0 20rpx 20rpx 20rpx;
    line-height: 24rpx;
    font-size: 24rpx;
    color: #666;
    text-align: left;
}
</style>